<template>
  <div class="common-search-form-component">
    <a-form layout="inline" :model="queryParams">
      <a-form-item v-for="item in searchConfig" :key="item.name" :label="item.label">
        <a-input
          v-model:value="queryParams[item.name]"
          :placeholder="$t(`setting.${item.name}Placeholder`)"
          allow-clear
          @keyup.enter="$emit('search')"
        />
      </a-form-item>
    </a-form>
  </div>
</template>

<script lang="ts" setup>
import type { ConfigQuery } from '@/types/api/config/config'
import { useSearchConfig } from '../config/searchConfig'

defineOptions({
  name: 'SearchForm'
})

withDefaults(defineProps<{
  queryParams: ConfigQuery
}>(), {
  queryParams: () => ({} as ConfigQuery)
})

// Emits定义
const emit = defineEmits<{
  (e: 'search'): void
  (e: 'reset'): void
}>()

// 搜索配置
interface SearchItem {
  name: keyof ConfigQuery
  label: string
}

const searchConfig = useSearchConfig() as unknown as SearchItem[]
</script>

<style lang="scss" scoped>
@import '@/assets/styles/views/common.scss';

.common-search-form-component {
  margin-bottom: 16px;
}
</style> 